import React, { useState, memo, useRef } from 'react';
import './index.less';
import Breadcrumb from 'components/common/Breadcrumb';
import { Card, Form, Switch, Select, Row, Col, Progress, Input } from 'antd';
import EditableComponent from 'components/Editable';
import { SettingOutlined, WarningOutlined, InfoCircleOutlined } from '@ant-design/icons';
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};
const { Item } = Form;
const { Option } = Select;

const StorageLength = memo(() => {
    const StorageSelect = (
        <Select style={{ width: 120 }} size="small">
            <Option value="3">3天</Option>
            <Option value="7">7天</Option>
            <Option value="15">15天</Option>
            <Option value="30">30天</Option>
            <Option value="-1">永久</Option>
        </Select>
    );
    const saveEdit = () => {};
    return (
        <div>
            <div className="mb20 font-20">
                <i className="iconfont iconbaocun mr10 font-20" />
                存储时长
            </div>
            <div className="flex-align mb20">
                <span className="mr20">异常视频保存</span>
                <EditableComponent
                    inEditChildren={StorageSelect}
                    unInEditChildren={<Input size="small" style={{ width: 60 }} value={'7天'} disabled />}
                    saveEdit={saveEdit}
                />
            </div>
        </div>
    );
});

const StorageSpace = memo(() => {
    const [checked, setChecked] = useState(false);
    return (
        <div>
            <div className="mb20 font-20">
                <SettingOutlined className="mr10" />
                存储空间
            </div>
            <Row className="mb20">
                <Col className="text-right pr20" flex="100px">
                    磁盘空间
                </Col>
                <Col span={6}>
                    <Progress percent={60} />
                </Col>
                <Col span={4} className="pl20">
                    1G/20G
                </Col>
                <Col span={4} className="pl20">
                    视频存储时长预估
                </Col>
                <Col span={4}>1G/20G</Col>
            </Row>
            <Row className="mb20">
                <Col className="text-right pr20" flex="100px">
                    存储满覆盖
                </Col>
                <Col span={4}>
                    <Switch defaultChecked={checked} size="small" onChange={(e) => setChecked(e)} />
                </Col>
                <Col span={16} style={{ color: 'red' }}>
                    <WarningOutlined className="mr20" />
                    开启后，当磁盘存储空间占满后，新异常视频将覆盖较早历史视频
                </Col>
            </Row>
        </div>
    );
});

const ClearTip = memo(() => {
    return (
        <div>
            <div className="font-20 mb20">
                <WarningOutlined className="mr10" />
                清理提示
            </div>
            <Card hoverable>
                <div className="mb10">
                    <InfoCircleOutlined className="mr10" />
                    您的硬盘存储空间不足，为避免音频无法存储，请及时处理！
                </div>
                <div className="mb10">
                    <InfoCircleOutlined className="mr10" />
                    您的历史异常视频存档即将到期，7天后，系统将自动删除！
                </div>
                <div className="mb10">
                    <InfoCircleOutlined className="mr10" />
                    您的历史异常视频存档已到期，系统将自动删除！
                </div>
                <div className="mb10">
                    <InfoCircleOutlined className="mr10" />
                    您的硬盘存储空间已满，新的视频存档将覆盖较早存档文件
                </div>
                <div>
                    <InfoCircleOutlined className="mr10" />
                    您的硬盘存储空间已满，新的视频存档将无法保存，请及时处理！
                </div>
            </Card>
        </div>
    );
});

const StorageMonitor = () => {
    /** 表单初始化 */
    const [form] = Form.useForm();
    return (
        <div className="storage-monitor">
            <Breadcrumb crumbs={['监控配置', '存储监控']}></Breadcrumb>
            <div style={{ padding: 20 }}>
                <StorageLength />
                <StorageSpace />
                <ClearTip />
            </div>
        </div>
    );
};
export default StorageMonitor;
